<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>${pathUrl}</title>
    <link rel="stylesheet" href="${pathUrl}/css/adminlogin.css">
    <script src="${pathUrl}/js/jquery.min.js" ></script>
    <script type="text/javascript">

        $(function () {
            refCode();
        })

        //表单验证
        function loginsubmit(){
            var username=document.getElementById("username");
            var password=document.getElementById("password");
            var code=document.getElementById("code");
            if(username.value==""){
                alert("请输入用户名");
                username.focus();
                return false;
            }

            if(password.value==""){
                alert("请输入密码");
                password.focus();
                return false;
            }

            if(code.value==""){
                alert("请输入验证码");
                code.focus();
                return false;
            }

            return checkCode();
        }
        //获取验证码
        function refCode(){
            var date=new Date();
            var imgcode=document.getElementById("imgcode");
            imgcode.src="${pathUrl}/common/code?s="+date.getTime();
        }

        //ajax检查验证码是否正确
        function checkCode() {
            var code = $("input[name='code']");
            var flag = false;
            $.ajax({
                type:"POST",
                url:"${pathUrl}/code/checkCode",
                dataType:"json",
                data:{
                    code:code.val(),
                },
                async: false,
                success:function(data){
                    if(data.status == 1){
                        flag = true;
                    } else {
                        flag = false;
                        alert("验证码输入错误请重新输入");
                    }

                },
                error:function(data){//当访问时候，404，500 等非200的错误状态码
                    alert("访问的页面出错，请联系管理员");
                }
            });
            return flag;
        }
    </script>
</head>
<body>
<c:if test="${not empty errMessage}">
    <script>
        alert("${errMessage}")
        window.location.href="${pathUrl}/admin/toLogin";
    </script>
</c:if>

<form action="${pathUrl}/admin/loginAdmin" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return loginsubmit()">
    <div class="login-main">
        <div class="login-header">
            登录
        </div>
        <div class="item-box">
            <img src="${pathUrl}/images/login-user.png" class="img">
            <input type="text" name="username"  id="username" placeholder="用户名">
        </div>
        <div class="item-box">
            <img src="${pathUrl}/images/login-pass.png" class="img">
            <input type="text" name="password" id="password" placeholder="密码">
        </div>
        <div class="item-code-box">
            <div class="item-box1">
                <img src="${pathUrl}/images/login-pass.png" class="img">
                <input type="text" name="code" id="code" placeholder="验证码">
            </div>
            <img src="" class="code" id="imgcode" onclick="refCode()" title="点击我重新获取">
        </div>
        <div class="item-box" style="border: 0px;margin-top: 15px;">
            <input  type="submit" value="登录" class="btn" style="border: 0px;"/>
        </div>
        <div class="item-box" style="border: 0px;margin-top: 15px;">
            <a href="${pathUrl}/home/index/index" class="btn" style="background: #2aef6c;">返回首页</a>
        </div>
    </div>
</form>
</body>
</html>